<template>
  <div>
    <div v-transfer-dom>
      <popup v-model="isPopupShow" position="right" @on-hide="handleHide">
        <div class="popupDiv" style="width: 7.5rem;">
          <div class="main" ref="remove">
            <div class="univSearchWrap">
              <div class="univSearBox">
                <div class="header">
                  <span @click="goback">
                    <i class="imgIcon backimgs"></i>
                  </span>
                </div>
                <div class="searchLine flex-h">
                  <span class="imgIcon"></span>
                  <div class="flex1">
                    <search :auto-fixed="false" @result-click="resultClick" :results="results" v-model="value" position="absolute" auto-scroll-to-top top="0.88rem" @on-submit="onSubmit" :placeholder="placeholderText" ref="search"></search>
                  </div>
                  <div class="clears" @click="clears"></div>
                </div>
              </div>
              <scroller ref="scrollerBottom" style="top: 1.76rem;">
                <div class="scrollerDiv">
                  <div class="describe">共{{ commonList.length }}个专业类、{{ getResultLength() }}个专业</div>
                  <ul class="scrollerCheckList">
                    <li class="parentItem" v-for="(itemParent, indexParent) in commonList" :key="indexParent">
                      <div :class="['top', openCatalogList.indexOf(itemParent.catalog_code) !== -1 ? 'isOpened' : '']" @click="isOpenCatalogList(itemParent)">
                        <div class="left">
                          <img class="imgIcon" src="~/static/images/search_icon_sure.png" @click.stop="topIconClick(itemParent, 'sure')" v-if="choCatalogList.indexOf(itemParent) !== -1" />
                          <img class="imgIcon" src="~/static/images/search_icon_nor.png" @click.stop="topIconClick(itemParent, 'nor')" v-else />
                          <span>{{ itemParent.catalog_name }}</span>
                        </div>
                        <div class="right">{{ openCatalogList.indexOf(itemParent.catalog_code) == -1 ? '+' : '-' }}</div>
                      </div>
                      <ul class="majorList" v-show="openCatalogList.indexOf(itemParent.catalog_code) !== -1">
                        <li v-for="(item, index) in itemParent.majors" :key="index" @click="majorChoClick(item, itemParent)">
                          <img class="imgIcon" src="~/static/images/search_icon_sure.png" v-if="checklist.indexOf(item) !== -1" />
                          <img class="imgIcon" src="~/static/images/search_icon_nor.png" v-else />
                          <span>{{ item.major_name }}</span>
                        </li>
                      </ul>
                    </li>
                  </ul>
                  <div style="width: 100%;height: 92px;"></div>
                </div>
                <div style="width: 100%;height: 92px;"></div>
              </scroller>

              <div class="footer">
                <div class="left">
                  <span class="hasChoose">已选择</span>
                  <span class="selectedNum">{{ checklist.length }}</span>
                  <span class="totalNum">/{{ getResultLength() }}</span>
                </div>
                <div class="right" @click="submit">确定</div>
              </div>
            </div>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import { TransferDom, Popup, Search } from 'vux'
import { format } from '~/plugins/filter'
import { getmajorall } from '~/api/repository'

import ls from 'store2'
export default {
  props: {
    popupShow: Boolean,
    placeholderText: String,
    status: String,
    divis: String,
  },
  directives: {
    TransferDom,
  },
  components: {
    Popup,
    Search,
  },
  data() {
    return {
      isPopupShow: false,
      searchs: '',
      results: [],
      value: '',
      commonList: [],
      totalList: [],
      checklist: [],
      choCatalogList: [], // 已选专业大类集合
      openCatalogList: [], // 展开下级列表的专业大类集合
      isWenLi: '',
    }
  },
  watch: {
    // 根据传入的popupShow这个值来判断popup是否显示
    popupShow(type) {
      this.isPopupShow = type
      this.checklist = []
      this.commonList = this.totalList
      this.choCatalogList = []
      this.openCatalogList = []
      this.value = ''
      // this.getResultLength(this.commonList);
    },
    searchs(e) {},
  },
  mounted() {
    if (this.divis == '理科') {
      this.isWenLi = 1
    } else if (this.divis == '文科') {
      this.isWenLi = 2
    }
    this.getAllMajorLists()
  },
  methods: {
    // 点击'专业大类'前勾选按钮时触发的事件
    topIconClick(item, type) {
      if (type == 'sure') {
        this.choCatalogList = this.choCatalogList.filter((x) => x !== item)
        this.openCatalogList = this.openCatalogList.filter((x) => x !== item.catalog_code)

        for (const major of item.majors) {
          this.checklist = this.checklist.filter((x) => x !== major)
        }
      } else {
        this.choCatalogList.push(item)
        this.openCatalogList.push(item.catalog_code)

        for (const catalog of this.choCatalogList) {
          for (const major of catalog.majors) {
            if (this.checklist.indexOf(major) == -1) {
              this.checklist.push(major)
            }
          }
        }
      }
    },
    // 点击是否展开下级列表的专业大类
    isOpenCatalogList(item) {
      if (this.openCatalogList.indexOf(item.catalog_code) == -1) {
        this.openCatalogList.push(item.catalog_code)
      } else {
        this.openCatalogList = this.openCatalogList.filter((x) => x !== item.catalog_code)
      }
    },
    // 点击某一专业
    majorChoClick(item, parentItem) {
      if (this.checklist.indexOf(item) == -1) {
        this.checklist.push(item)
        let isAllCho = true
        // 将当前专业大类的每个元素与checklist集合中的元素进行比较
        // 当大类中的每个元素都在checklist集合中时让大类也勾选上
        for (const major of parentItem.majors) {
          if (this.checklist.indexOf(major) == -1) {
            isAllCho = false
          }
        }
        if (isAllCho) this.choCatalogList.push(parentItem)
      } else {
        this.checklist = this.checklist.filter((x) => x !== item)

        if (this.choCatalogList.indexOf(parentItem) !== -1) {
          this.choCatalogList = this.choCatalogList.filter((x) => x !== parentItem)
        }
      }
    },

    getAllMajorLists() {
      getmajorall({
        level: 1,
        depth: 2,
        format: 2,
        wenli: this.isWenLi,
      }).then((res) => {
        if (res.code == 200) {
          this.commonList = res.data
          this.totalList = res.data
        }
      })
    },
    // 获取list集合的数量长度
    getResultLength() {
      let resultLength = 0
      for (const major of this.commonList) {
        resultLength += major.majors.length
      }
      return resultLength
    },
    getMajorData(value) {
      let arr = []
      for (const catalog of this.totalList) {
        for (const major of catalog.majors) {
          if (major.major_name.indexOf(value) !== -1) {
            if (arr.indexOf(catalog) == -1) {
              arr.push(catalog)
            }
          }
        }
      }
      this.commonList = arr
    },
    handleHide() {
      this.$emit('closePopUp')
    },
    goback() {
      this.$emit('closePopUp')
    },
    onSubmit() {
      this.checklist = []
      this.$refs.search.setBlur()
      this.getMajorData(this.value)
    },

    resultClick(item) {},
    clears() {
      this.value = ''
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData,
        },
      })
    },
    addOrRemove(item) {
      if (this.checklist.indexOf(item) == -1) {
        this.checklist.push(item)
      } else {
        this.checklist = this.checklist.filter((x) => {
          return x !== item
        })
      }
    },
    submit() {
      if (this.checklist.length > 20) {
        this.$vux.confirm.show({
          content: '已选专业超过20个，会导致方案准确度大幅下降，是否确认提交？',
          onCancel: () => {},
          onConfirm: () => {
            this.$emit('sendList', this.checklist)
          },
        })
      } else {
        this.$emit('sendList', this.checklist)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.vux-popup-dialog {
  background: #fff;
}

.univSearchWrap {
  width: 7.5rem;
  min-height: 100vh;
  background: #fff;
  position: relative;

  .univSearBox {
    width: 7.5rem;
    padding: 0 0.3rem;
    box-sizing: border-box;
    height: auto;

    .header {
      width: 100%;
      height: 0.88rem;
      line-height: 0.88rem;
      font-size: 0.3rem;
      .imgIcon {
        width: 0.4rem;
        height: 0.4rem;
      }
      .backimgs {
        display: inline-block;
        background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
        background-size: 3rem 2.4rem;
      }
    }

    .searchLine {
      width: 100%;
      height: 0.88rem;
      padding-right: 0.3rem;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(238, 238, 238, 1);
      padding-left: 0.08rem;
      padding-bottom: 0.05rem;
      overflow: hidden;
      .clears {
        width: 0.6rem;
        height: 0.88rem;
        line-height: 0.88rem;

        // align-items: center;
        // overflow: hidden;
      }

      .imgIcon {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        margin-top: 0.24rem;
        background: url('~/static/sprite/other_sprites.png') 0.42rem -0.6rem;
        background-size: 4.68rem 4.08rem;
      }
    }

    .searchLine /deep/ .weui-search-bar {
      background-color: none;
      padding: 0;
    }

    .searchLine /deep/ .weui-search-bar:before {
      border: none;
      height: 0;
    }

    .searchLine /deep/ .weui-search-bar:after {
      border: none;
      height: 0;
    }

    .searchLine /deep/ .weui-search-bar__box {
      padding-left: 0.2rem;
      height: 0.88rem;
      // background: red;
    }
    /deep/ .weui-search-bar__box .weui-search-bar__input {
      background: #fff !important;
    }
    /deep/.weui-search-bar__form {
      background: #fff !important;
    }
    .searchLine /deep/ .weui-search-bar__form:after {
      border: none;
      border-radius: 0;
    }

    .searchLine /deep/ .weui-search-bar.weui-search-bar_focusing .weui-search-bar__cancel-btn {
      display: none !important;
    }

    .searchLine /deep/ .weui-search-bar__box .weui-icon-clear {
      display: none !important;
    }

    .searchLine /deep/ .weui-icon-search:before,
    .searchLine /deep/ .weui-search-bar__label {
      display: none !important;
    }

    .searchLine /deep/ .weui-search-bar__label span {
      display: none;
    }

    .searchLine /deep/ .weui-search-bar__box .weui-search-bar__input {
      height: 0.88rem;
      line-height: 0.88rem;
      font-size: 0.34rem;
      position: absolute;
    }
  }

  .scrollerDiv {
    padding: 0.3rem;
    box-sizing: border-box;
    .describe {
      font-size: 0.26rem;
      color: #bbb;
      font-weight: bold;
      // margin-top: 0.6rem;
      margin-bottom: 0.2rem;
    }

    .scrollerCheckList /deep/ .weui-cells:before {
      border: none;
      left: 0;
    }

    .scrollerCheckList {
      list-style: none;
      padding-left: 0;

      .parentItem {
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 0.9rem;
          line-height: 0.9rem;
          background: transparent;
          border-bottom: 1px solid #eee;
          padding-left: 0.3rem;
          padding-right: 0.3rem;

          .left {
            display: flex;
            align-items: center;
            span {
              font-size: 0.3rem;
              margin-left: 0.28rem;
              color: #222;
              letter-spacing: 0.03rem;
            }

            .imgIcon {
              width: 0.4rem;
              height: 0.4rem;
            }
          }
          .right {
            font-size: 0.3rem;
            color: #222;
          }
        }

        .isOpened {
          background: #f7f7fa;
        }

        .majorList {
          list-style: none;
          padding-left: 0.5rem;
          li {
            display: flex;
            align-items: center;
            height: 0.8rem;
            border-bottom: 1px solid #eee;
            padding-left: 0.3rem;
            span {
              font-size: 0.24rem;
              margin-left: 0.28rem;
              color: #555;
              letter-spacing: 0.03rem;
            }
            .imgIcon {
              width: 0.35rem;
              height: 0.35rem;
            }
          }
        }
      }
    }
  }

  .footer {
    width: 100%;
    height: 1.2rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
    color: #ccc;
    padding: 0 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      align-items: center;

      .hasChoose {
        color: #222;
        font-size: 0.26rem;
        font-weight: bold;
        margin-right: 0.2rem;
      }

      .selectedNum {
        color: @mainColor;
        font-size: 0.4rem;
        margin-right: 0.07rem;
      }

      .totalNum {
        color: #bbb;
        font-size: 0.22rem;
      }
    }

    .right {
      display: inline-block;
      width: 2rem;
      height: 0.7rem;
      line-height: 0.7rem;
      text-align: center;
      border-radius: 0.1rem;
      background: @mainColor;
      color: #fff;
      font-size: 0.36rem;
    }
  }
}
</style>
